import React, { memo, useEffect, useState } from 'react'

import HYThemeHeaderNormal from '@/components/theme-header-normal'
import HYAlbumCover from '@/components/album-cover'
import HYPagination from '@/components/pagination'
import { TopAlbumWrapper } from './style'
import { getTopAlbumsAction } from '../../store/actionCreators'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

export default memo(function HYTopAlbum () {
  const [currentPage, setCurrentPage] = useState(1)
  const { topAlbums, total } = useSelector(state => ({
    topAlbums: state.getIn(['album', 'topAlbums']),
    total: state.getIn(['album', 'topTotal'])
  }), shallowEqual)

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getTopAlbumsAction(1));
  }, [dispatch])

  const onPageChange = (page, pageSize) => {
    setCurrentPage(page);
    dispatch(getTopAlbumsAction(page));
  }

  return (
    <TopAlbumWrapper>
      <HYThemeHeaderNormal title="全部新碟" />
      <div className="album-list">
        {
          topAlbums.map((item, index) => {
            return <HYAlbumCover
              size={130}
              width={153}
              bgp={'-845px'}
              info={item}
              key={item.id}
            />
          })
        }
      </div>
      <HYPagination
        currentPage={currentPage}
        total={total}
        pageSize={30}
        onPageChange={onPageChange}
      />
    </TopAlbumWrapper>
  )
})
